<template>
  <div>
    <el-form :inline="true" style="margin-bottom: -15px" label-width="130px">
      <el-form-item style="margin-bottom: 5px">
        <el-button class="el-icon-sort" type="text" @click="convertTabsShow" />
      </el-form-item>
      <el-form-item style="margin-bottom: 5px">
        <el-select style="width: 120px" v-model="project" clearable placeholder="所属项目..." size="mini" @change="handleSelectProject">
          <el-option-group v-for="group in projectList" :key="group.label" :label="group.label">
            <el-option v-for="item in group.projectList" :key="item.projectId" :label="item.projectName" :value="item.projectId" />
          </el-option-group>
        </el-select>
      </el-form-item>
      <el-form-item style="margin-bottom: 5px">
        <el-cascader
          :key="popData.moduleKey"
          v-model="moduleId"
          style="width: 150px"
          size="mini"
          :options="popData.moduleList"
          :props="{label:'moduleName', value: 'moduleId', children: 'children'}"
          clearable
          placeholder="所属模块..."
          class="form-inputA"
        />
      </el-form-item>
      <el-form-item style="margin-bottom: 5px">
        <el-select style="width: 120px" v-model="devPerson" clearable placeholder="开发负责人..." size="mini" filterable>
          <el-option-group v-for="group in userList" :key="group.userId" :value="group.userId" :label="group.label">
            <el-option v-for="item in group.options" :key="item.userId" :label="item.userName" :value="item.userId" />
          </el-option-group>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="status" placeholder="事件状态" size="mini" clearable style="width: 120px">
          <el-option v-for="item in statusList" :key="item.key" :label="item.value" :value="item.key" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="devStatus" placeholder="开发状态" size="mini" clearable style="width: 120px">
          <el-option v-for="item in devStatusList" :key="item.key" :label="item.value" :value="item.key" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          value-format="yyyy-MM-dd"
          size="mini"
          style="width: 130px"
          v-model="popData.recordBegin"
          type="date"
          placeholder="发现时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        至
      </el-form-item>
      <el-form-item>
        <el-date-picker
          value-format="yyyy-MM-dd"
          size="mini"
          style="width: 130px"
          v-model="popData.recordEnd"
          type="date"
          placeholder="发现时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" style="margin-bottom: 5px" @click="handleClickSerach">查询</el-button>
        <el-button size="mini" @click="exportExcel">导出至Excel</el-button>
      </el-form-item>
      <div style="float:right; margin-top: 5px">
        <pop-vue ref="pop" />
      </div>
    </el-form>
  </div>
</template>

<script>
import PopVue from './pop.vue'
import { findByGroup } from '@/api/user'
import { findProjectByGroup } from '@/api/project'
import { findByPage, exportExcel } from '@/api/events'
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters([
      'window_height'
    ])
  },
  name: 'SearchVue',
  components: {
    PopVue
  },
  props: ['userId', 'role'],
  mounted() {
    this.devPerson = this.role === 'developer' ? this.userId : ''
  },
  data() {
    return {
      height: `${document.documentElement.clientHeight}`,
      versionList: [],
      projectList: [
        {
          label: '开发项目',
          projectList: []
        },
        {
          label: '已关闭项目',
          projectList: []
        }
      ],
      statusList: [
        { key: 0, value: '待解决' },
        { key: 1, value: '已解决' },
        { key: 2, value: '关闭' }
      ],
      devStatusList: [
        { key: 0, value: '待确认' },
        { key: 1, value: '已分配' },
        { key: 2, value: '已提交' },
        { key: 3, value: '待测试' },
        { key: 4, value: '已完成' },
        { key: 5, value: '关闭' }
      ],
      userList: [{
        label: '组长',
        options: []
      }, {
        label: '开发',
        options: []
      }, {
        label: '测试',
        options: []
      }],
      devPerson: '',
      project: '',
      moduleId: [],
      version: '',
      decomposition: '',
      status: '',
      devStatus: '',
      popData: {
        userList: [],
        vesrion: [],
        projectList: [],
        moduleKey: 1,
        moduleList: [],
        group: '',
        recordBegin: '',
        recordEnd: ''
      }
    }
  },
  methods: {
    exportExcel() {
      const data = {
        group: this.popData.group,
        projectId: this.project,
        devPerson: this.devPerson,
        lv1ModuleId: this.moduleId[0],
        lv2ModuleId: this.moduleId[1],
        recordBegin: this.popData.recordBegin,
        recordEnd: this.popData.recordEnd,
        peStatus: this.status,
        devStatus: this.devStatus
      }
      exportExcel(data).then( _ => {

      })
    },
    convertTabsShow() {
      this.changeTableHeight(this.$parent.show)
      this.$parent.convertShow()
    },
    changeTableHeight(show) {
      // if (show) {
      //   this.$parent.$refs.tableList.tableHeight = this.height>900?830:520
      // } else {
      //   this.$parent.$refs.tableList.tableHeight = this.height>900?770:458
      // }
      if (show) {
        this.$parent.$refs.tableList.tableHeight = this.window_height - 107
      } else {
        this.$parent.$refs.tableList.tableHeight = this.window_height - 169
      }
      // console.log(this.$parent.$refs.tableList.tableHeight)
    },
    handleSelectProject(id) {
      this.popData.moduleKey++
      if (this.project === '' || this.project == null) {
        this.moduleId = []
        this.popData.moduleList = []
        return
      }
      this.popData.projectList.forEach(p => {
        if (p.projectId === id) {
          this.popData.moduleList = p.modules
        }
      })
    },
    handleClickSerach() {
      const data = {
        group: this.popData.group,
        projectId: this.project,
        devPerson: this.devPerson,
        lv1ModuleId: this.moduleId[0],
        lv2ModuleId: this.moduleId[1],
        recordBegin: this.popData.recordBegin,
        recordEnd: this.popData.recordEnd,
        peStatus: this.status,
        devStatus: this.devStatus
      }
      const page = this.$parent.$refs.tableList.page
      findByPage(data, page.pageSize, page.pageNum).then(response => {
        this.$parent.$refs.tableList.getTableData(response)
      })
    },
    clickNew(groupId) {
      this.selectData(groupId)
      this.handleClickSerach()
    },
    selectData(groupId) {
      this.popData.group = groupId
      this.userList[0].options = []
      this.userList[1].options = []
      this.userList[2].options = []
      findByGroup(groupId).then(response => {
        this.popData.userList = response
        for (let i = 0; i < response.length; i++) {
          const element = response[i]
          if (element.role === 'leader') {
            this.userList[0].options.push(element)
          }
          if (element.role === 'developer') {
            this.userList[1].options.push(element)
          }
          if (element.role === 'tester') {
            this.userList[2].options.push(element)
          }
        }
      })
      this.projectList[0].projectList = []
      this.projectList[1].projectList = []
      findProjectByGroup(groupId).then(response => {
        for (let i = 0; i < response.length; i++) {
          const element = response[i]
          if (element.status === 0) {
            this.projectList[0].projectList.push(element)
          } else {
            this.projectList[1].projectList.push(element)
          }
        }
        this.popData.projectList = response
      })
    },
    initStateData() {

    }
  }
}

</script>
